<template>
<div>
  <!--1 变量表达式 -------------------->
<h1>{{headline}}</h1><hr>
<h1>{{sum}}</h1><hr>
<!--2 特殊的 html 标签属性 ------------>
<p id="box" v-html="words"></p><hr>
  <!--3 对象属性 表达式 -->
<h1>{{obj.usname}}</h1>
<h1>{{obj.sum}}</h1>
<h1>{{obj.sex}}</h1>
<!--4 toUpperCase()函数 方法调用式 将英文字符串改成大写--->
<h1>{{msg.toUpperCase()}}</h1>
<!--5 三元表达式 ---------------------->
<h2>{{obj.age>sum?"大于":"不大于"}}</h2>
<hr>


<!-- vue的指令都以v-开头  变量需要在data函数的返回对象里声明-->

<!-- 单向绑定 -->
<!--1、 v-bind语法，v-bind:属性名="变量"  作用：给标签修改属性-->
  <!--  v-bind:  跳转链接  全写 可以解析变量 否则就会以字符串输出 单向发送不会返回 前端发给后端-->
  <a v-bind:href="url" style="font-size:40px" > 跳转B站</a><br>
<p v-bind:style="name">小白</p>
   <!--  :  跳转链接 简写 -->
  <a :href="url" style="font-size:40px">跳转B站简写</a><hr>
<hr>

  <!-- 文本框显示输入的文字  placeholder="固定文字"  value用变量接收数据用户输出的值-->
  <input type="text" :value="HelloWorld"><hr>




 <!--2、 绑定事件使用v-on指令 点击事件绑定 --> 
<!-- 简单表达式 -->
   <!-- 语法：v-on:事件名="代码" -->
<button v-on:click="money-=10">减少10元</button>
   <!-- 简写方式: @ 事件名="代码" -->
<button @click="money+=10">增加10元简写</button>

 <!--3、 绑定事件，调用函数 点击事件绑定-->
<!--不传参 函数声明在methods对象里面  函数里的必须使用 this --> 
<button @click="add50">增加50元</button>
<!-- 传参 事件绑定 调用函数 传参  函数声明在methods对象里面 函数里的必须使用 this      -->
<button @click="addMoney(100)">增加100元</button>
<button @click="addMoney(500)">加500元</button>
<button @click="addMoney1(500)">减500元</button>

<hr>


<!--3、 阻止页面跳转  事件绑定获取事件对象 -->
<!-- v-on绑定事件获取事件对象有两种情况 -->
    <!-- 第一种@事件名="函数名"，函数第一个参数就是事件对象 -->
<a href="https://www.bilibili.com/" @click="fn" style="font-size:40px">阻止页面跳转链接</a><br>

  <!-- 第二种情况, @事件名="函数名(参数)"，传入$event，它会被替换成事件对象阻止跳转 -->
 <a href="https://www.bilibili.com/" @click="fn1(22,$event)" style="font-size:40px">阻止页面跳转链接</a>


</div>
</template>

<script>

export default {
data(){
    return{
     headline:"一级标题",
     words:"<h1>解析插值标签</h1>",
     obj:{sex:"男",usname:"泳哥",age:14},
     msg:   "函数调用方法aaaa",
     sum:15,
     url:"https://www.bilibili.com/",
     HelloWorld:"请输入文字",
     money:10,
     name:"font-size:40px",
     lader:30
  }
      },
  methods:{
add50(){
  this.money+=50
},
addMoney(amount){
 this.money+=amount
},
addMoney1(amount){
 this.money-=amount
},
fn(e){
    e.preventDefault()
},
fn1(contenn,e){
    e.preventDefault()
},box(e){
  e.preventDefault()
  alert("触发")
}
  }
  
}
</script>

<style lang="less" >
</style>
